<template>
  <div id="root">
    <!-- <transition name="fade-in"> -->
      <router-view></router-view>
    <!-- </transition> -->
    <div class="tabbar">
      <tabbar v-model="tabValue">
        <tabbar-item v-for="(tab, index) in tabs" :key="index" @click.native.prevent="skip(tab.link)">
          <img class="icon-image" slot="icon" :src="tab.src">
          <img class="icon-image" slot="icon-active" :src="tab.activeSrc">
          <span slot="label">{{ tab.label }}</span>
        </tabbar-item>
      </tabbar>
    </div>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vux'
export default {
  name: 'Home',
  components: {
    Tabbar,
    TabbarItem
  },
  data () {
    return {
      tabList: [
        {
          link: '/service',
          src: require('../images/icon_service.png'),
          activeSrc: require('../images/icon_service_active.png'),
          label: '服务'
        },
        // {
        //   link: '/verifyHouse',
        //   src: require('../images/icon_big_plus.png'),
        //   activeSrc: require('../images/icon_big_plus.png'),
        //   label: '发布房源'
        // },
        {
          link: '/news',
          src: require('../images/icon_news.png'),
          activeSrc: require('../images/icon_news_active.png'),
          label: '资讯'
        },
        {
          link: '/user',
          src: require('../images/icon_user.png'),
          activeSrc: require('../images/icon_user_active.png'),
          label: '我的'
        }
      ],
      tabValue: 0
    }
  },
  computed: {
    userRole () {
      return this.$store.state.login.userRole
    },
    tabs () {
      let list = [...this.tabList]
      if (this.userRole === 'renter') {
        list.unshift({
          link: '/',
          src: require('../images/icon_home.png'),
          activeSrc: require('../images/icon_home_active.png'),
          label: '首页'
        })
      } else {
        list.unshift({
          link: '/houseManage',
          src: require('../images/icon_home.png'),
          activeSrc: require('../images/icon_home_active.png'),
          label: '房管'
        })
      }
      return list
    }
  },
  methods: {
    skip (path) {
      this.$router.push(path)
    },
    changeTab (routerName) {
      switch (routerName) {
        case 'home':
          this.tabValue = 0
          break
        case 'service':
          this.tabValue = 1
          break
        case 'news':
          this.tabValue = 2
          break
        case 'user':
          this.tabValue = 3
          break
      }
    }
  },
  watch: {
    $route (newVal, oldVal) {
      this.changeTab(newVal.name)
    }
  },
  created () {
    this.changeTab(this.$route.name)
  }
}
</script>

<style lang="less">
  @import "../styles/baseVar.less";
  #root{
    .tabbar {
      height: 64px;
    }
    .weui-tabbar {
      height: 50px;
      position: fixed;
      background: #fafafa;
      border-top: 0.5px solid #e5e5e5;
      &:before{
        border: none;
      }
      .weui-tabbar__item {
        padding-top: 6px;
        .weui-tabbar__icon {
          width: 24px;
          height: 24px;
        }
      }
      .weui-tabbar__item:nth-child(3) {
        .weui-tabbar__icon {
          // position: relative;
          // width: 40px;
          // height: 40px;
          // margin-top: -16px;
          // .icon-image {
          //   background: #ff9600;
          //   border-radius: 50%;
          // }
          // &:before {
          //   content: '';
          //   position: absolute;
          //   top: 50%;
          //   left: 50%;
          //   z-index: -1;
          //   display: block;
          //   width: 48px;
          //   height: 48px;
          //   margin-top: -25px;
          //   margin-left: -24px;
          //   background: #fafafa;
          //   border-radius: 50%;
          //   border-top: 1px solid #e5e5e5;
          // }
        }
      }
    }
    .weui-tabbar__label {
      font-size: 10px;
      color: #777;
    }
    .weui-bar__item_on {
      .weui-tabbar__label {
        color: @theme-button-cancel-font-color;
      }
    }
  }
</style>
